<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">平台用户</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox">
        <!-- 时间选择区域 -->
        <span class="demonstration">注册时间：</span>
        <el-date-picker
          v-model="searchValue.startTime"
          type="date"
          placeholder="开始时间"
          @change="startTime"
          :clearable="false"
          :default-time="defaultTime(0, 0, 0)" />
        <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
          >至</span
        >
        <el-date-picker
          v-model="searchValue.endTime"
          type="date"
          placeholder="结束时间"
          @change="endTime"
          :clearable="false"
          :default-time="defaultTime1(23, 59, 59)" />
        &emsp;
        <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
          <el-radio label="1" size="large">今天</el-radio>
          <el-radio label="2" size="large">近7天</el-radio>
          <el-radio label="3" size="large">近30天</el-radio>
          <el-radio label="4" size="large">近3个月</el-radio>
        </el-radio-group>

        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 用户ID -->
          <div class="input_valye">
            <span class="demonstration">用户ID</span>
            <input
              type="text"
              class="input"
              placeholder="请输入用户ID"
              v-model="searchValue.id"
              style="width: 220px"
              @keyup.enter="search" />
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <!-- 表格按钮区域 -->
        <div class="table_function">
          <el-button class="solid" plain @click="massTexting">发送消息</el-button>
          <el-button
            class="hollow"
            plain
            @click="whiteListBtn(nowShow)"
            v-if="nowShow == '4' || nowShow == '3' || nowShow == '2'"
            ><el-icon>
              <Document /> </el-icon
            >&nbsp;测试白名单</el-button
          >
          <el-button
            class="hollow"
            plain
            @click="addWhiteListBtn"
            v-if="delIds.length != 0 && (nowShow == '4' || nowShow == '3')"
            ><el-icon>
              <CirclePlus /> </el-icon
            >&nbsp;加入白名单</el-button
          >
        </div>
        <el-tabs v-model="nowShow" @tab-change="changListType">
          <el-tab-pane label="普通商户" name="1"> </el-tab-pane>
          <el-tab-pane label="拆解厂" name="2"> </el-tab-pane>
          <el-tab-pane label="维修厂" name="3"> </el-tab-pane>
          <el-tab-pane label="普通用户" name="4"> </el-tab-pane>
          <el-tab-pane label="拖车司机" name="5"> </el-tab-pane>
        </el-tabs>
        <!-- 普通商户、拆解厂 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          @select="handleSelectionChange"
          @select-all="handleSelectionChange"
          :header-cell-style="{'text-align': 'center'}"
          v-show="nowShow == '1' || nowShow == '2'"
          :show-overflow-tooltip="true"
          v-adaptive
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" :label="nowShow == '1' ? '店铺ID' : '公司ID'" align="center" />
          <el-table-column prop="shopName" :label="nowShow == '1' ? '店铺名' : '公司名'" align="center" />
          <el-table-column prop="companyName" label="拆解厂" align="center" />
          <el-table-column prop="shopAddress" label="公司地址" align="center" />
          <el-table-column prop="settleAt" label="注册时间" align="center" />
          <el-table-column prop="rank" label="会员等级" align="center">
            <template #default="item">
              <el-text v-if="item.row.rank == 0" class="mx-1" type="success">青铜</el-text>
              <el-text v-if="item.row.rank == 1" class="mx-1" type="info">白银</el-text>
              <el-text v-if="item.row.rank == 2" class="mx-1" type="warning">黄金</el-text>
              <el-text v-if="item.row.rank == 3" class="mx-1" type="primary">钻石</el-text>
            </template>
          </el-table-column>
          <template v-if="nowShow === '2'">
            <el-table-column label="操作" align="center">
              <template #default="item">
                <el-text class="mx-1" type="primary" style="cursor: pointer" @click="addDisassembleWhite(item.row.id)"
                  >添加白名单</el-text
                >
              </template>
            </el-table-column>
          </template>
        </el-table>
        <!-- 普通用户、修理厂 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :show-overflow-tooltip="true"
          v-adaptive
          border
          @select="handleSelectionChange"
          @select-all="handleSelectionChange"
          :header-cell-style="{'text-align': 'center'}"
          v-show="nowShow == '3' || nowShow == '4'">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="用户ID" align="center" /><el-table-column
            prop="phone"
            label="用户账号"
            align="center" />
          <el-table-column prop="username" label="用户名" align="center" />
          <el-table-column prop="vipRate" label="会员等级" align="center">
            <template #default="item">
              <el-text v-if="item.row.vipRate == 0" class="mx-1" type="success">青铜</el-text>
              <el-text v-if="item.row.vipRate == 1" class="mx-1" type="default">白银</el-text>
              <el-text v-if="item.row.vipRate == 2" class="mx-1" type="warning">黄金</el-text>
              <el-text v-if="item.row.vipRate == 3" class="mx-1" type="primary">钻石</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="integral" label="用户积分" align="center" />
          <el-table-column prop="registerAt" label="注册时间" align="center" width="180" />
          <el-table-column prop="status" label="用户状态" align="center">
            <template #default="item">
              <el-text v-if="item.row.status == 1" class="mx-1" type="success">活跃</el-text>
              <el-text v-if="item.row.status == 2" class="mx-1" type="primary">注销</el-text>
              <el-text v-if="item.row.status == 3" class="mx-1" type="warning">冻结</el-text>
            </template>
          </el-table-column>
        </el-table>
        <!-- 拖车 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :show-overflow-tooltip="true"
          v-adaptive
          border
          @select="handleSelectionChange"
          @select-all="handleSelectionChange"
          :header-cell-style="{'text-align': 'center'}"
          v-show="nowShow == '5'">
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="用户ID" align="center" /><el-table-column
            prop="phone"
            label="用户账号"
            align="center" />
          <el-table-column prop="name" label="用户名" align="center" />
          <el-table-column prop="createdAt" label="注册时间" align="center">
            <template #default="item">
              {{ moment(item.row.createdAt).format('yyyy-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @current-change="pageChange"
          :page-size="15"
          :page-sizes="[100, 200, 300, 400]"
          small
          :current-page="searchValue.page"
          background
          layout="prev,total, pager, next"
          :total="total"
          class="mt20" />
      </div>
      <!-- 群发信息 -->
      <div class="messages" v-if="messagesShow">
        <div class="title1">
          <div class="title_mes">
            <el-icon size="20" color="#fff">
              <Edit /> </el-icon
            >&nbsp;群发消息
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1" style="margin-top: 40px">
          <el-form ref="ruleFormRef" :model="sendMes" label-width="90px" label-position="right" :rules="rules">
            <el-form-item label="推送方式:" prop="type">
              <el-radio-group v-model="sendMes.method" class="ml-4">
                <el-radio label="0" size="large" v-if="nowShow != '5'">站内信</el-radio>
                <el-radio label="1" size="large">短信</el-radio>
                <!-- <el-radio value="2" size="large">Option 2</el-radio> -->
              </el-radio-group>
            </el-form-item>
            <el-form-item label="消息类型:" prop="type">
              <el-select v-model="sendMes.type" class="m-2" placeholder="请选择推送类型" @change="typeChange">
                <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <span id="input_hint"></span>
            </el-form-item>
            <el-form-item label="消息模板:" prop="templateId">
              <el-select v-model="sendMes.templateId" class="m-2" placeholder="请选择消息模板" @change="typeChange1">
                <el-option v-for="item in template_options" :key="item.title" :label="item.title" :value="item.id">
                </el-option>
              </el-select>
              <span id="input_hint"></span>
            </el-form-item>
            <el-form-item label="消息标题:" prop="title">
              <el-input
                v-model="sendMes.title"
                class="form_input"
                maxlength="50"
                type="textarea"
                show-word-limit></el-input>
              <span id="input_hint"></span>
            </el-form-item>
            <el-form-item label="短信内容:" prop="content">
              <el-input
                v-model="sendMes.content"
                cols="30"
                rows="4"
                class="form_input"
                maxlength="300"
                type="textarea"
                show-word-limit></el-input>
              <span id="input_hint"></span>
            </el-form-item>
          </el-form>
          <div class="btn_center">
            <el-button class="hollow" @click="maskBtn1">取消</el-button>
            <el-button class="solid" @click="plateformSure(ruleFormRef)" :loading="loading">确定</el-button>
          </div>
        </div>
      </div>
      <!-- 白名单 -->
      <div class="messages" v-if="whiteListShow">
        <div class="title1">
          <div class="title_mes">
            <el-icon size="20" color="#fff">
              <Edit /> </el-icon
            >&nbsp;测试白名单
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1" style="margin-top: 40px">
          <template v-if="nowShow !== '2'">
            <el-table :data="whiteList" height="300" style="width: 100%" :header-cell-style="{'text-align': 'center'}">
              <el-table-column label="序号" align="center" width="60">
                <template #default="item">
                  {{ item.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="id" label="ID" align="center" width="50" />
              <el-table-column prop="username" label="用户名" align="center" />
              <el-table-column prop="registerAt" label="注册时间" align="center" />
              <el-table-column prop="rank" label="操作" align="center" width="70">
                <template #default="item">
                  <el-text class="mx-1" type="danger" style="cursor: pointer" @click="delWhiteList(item.row)"
                    >移除</el-text
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
          <template v-else>
            <el-table :data="whiteList" height="300" style="width: 100%" :header-cell-style="{'text-align': 'center'}">
              <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
              <el-table-column prop="companyName" label="公司名称" align="center" />
              <el-table-column prop="phone" label="手机号" align="center" />
              <el-table-column prop="address" label="地址" align="center" /> </el-table
          ></template>
          <div class="btn_center">
            <el-button class="hollow" @click="maskBtn1">取消</el-button>
          </div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div id="mask1" v-if="mask" @click="maskBtn1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue';
import {
  RequestPlatformUser,
  RequesttemplateIds,
  SendMesToUser,
  RequestPlatformToShopMes,
  RequestPageListByType,
  RequestGetDriverPageList,
  RequestSendSMS,
  RequestAddUserToWhitelist,
  RequestGetUserToWhitelist,
  RequestDisassembleList,
  RequestAddDisassemble,
  RequestDeleteDisassemble,
  RequestRemoveUserFromWhitelist,
} from '@/api/path/index.js';
import moment from 'moment';
import {ElMessage} from 'element-plus';
import type {FormInstance} from 'element-plus';
import {Edit, CirclePlus, Document} from '@element-plus/icons-vue';
const ruleFormRef = ref<FormInstance>();
// 表单规则
const rules = reactive({
  type: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  templateId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
  title: [{required: true, message: '请输入消息标题', trigger: 'blur'}],
  content: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
});
// 挂载
onMounted(() => {
  acquireShop(0);
  handleResize();
  window.addEventListener('resize', handleResize);
});

/**************************************************  切换查看信息  **************************************************/
const changListType = () => {
  delIds.value = [];
  searchValue.value.page = 1;
  if (nowShow.value == '1') {
    acquireShop(0);
  } else if (nowShow.value == '2') {
    acquireShop(1);
  } else if (nowShow.value == '3') {
    acquireUser(1);
  } else if (nowShow.value == '4') {
    acquireUser(0);
  } else {
    acquireDriver();
    sendMes.value.method = '1';
  }
};

/**************************************************  表格数据  **************************************************/
const nowShow = ref('1');
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const tableAll = ref([]);
/**
 * 获取用户，维修厂列表
 */
const acquireUser = async (value: number) => {
  const a = await RequestPlatformUser({
    id: searchValue.value.id,
    startTime: searchValue.value.startTime,
    endTime: searchValue.value.endTime,
    type: value, //0普通用戶，1维修厂用户
  });
  total.value = a.resultObj.count;
  tableAll.value = a.resultObj.users;
  tableData.value = tableAll.value.slice(15 * (searchValue.value.page - 1), 15 * searchValue.value.page);
};
/**
 * 获取商户，拆解厂列表
 */
const acquireShop = async (value: number) => {
  const a = await RequestPageListByType({
    id: searchValue.value.id,
    startAt: searchValue.value.startTime,
    endAt: searchValue.value.endTime,
    type: value, //0普通店铺，1拆解厂店铺
  });
  total.value = a.resultObj.count;
  tableAll.value = a.resultObj.shops;
  tableData.value = tableAll.value.slice(15 * (searchValue.value.page - 1), 15 * searchValue.value.page);
  console.log('获取成功11', tableData.value);
};
/**
 * 获取拖车列表
 */
const acquireDriver = async () => {
  const a = await RequestGetDriverPageList({
    id: searchValue.value.id,
    startAt: searchValue.value.startTime,
    endAt: searchValue.value.endTime,
  });
  total.value = a.resultObj.count;
  tableAll.value = a.resultObj.list;
  tableData.value = tableAll.value.slice(15 * (searchValue.value.page - 1), 15 * searchValue.value.page);
  console.log('获取成功', a);
};
const mask = ref(false); //控制遮罩层显示
const radio = ref('');
/**************************************************  群发消息  **************************************************/

const delIds = ref<any>([]); //接收的对象的id数组
/**
 * 表格复选框选中事件
 */
const handleSelectionChange = (selection: any) => {
  delIds.value = [];
  selection.forEach((item: any) => {
    delIds.value.push(item.id);
  });
};
/**
 * 发送消息
 */
const messagesShow = ref(false); //控制群发显示
const massTexting = () => {
  if (delIds.value.length != 0) {
    mask.value = true;
    messagesShow.value = true;
  } else {
    ElMessage.error('请先选择接收消息的对象！');
  }
};
const whiteList = ref<any>([]);
/**
 * 白名单
 */
const whiteListShow = ref();
const whiteListBtn = async (nowShow: string) => {
  whiteListShow.value = true;
  mask.value = true;
  if (nowShow === '2') {
    const res = await RequestDisassembleList();
    if (res.msg == '操作成功！' && res.resultObj != null) {
      whiteList.value = [res.resultObj];
    } else {
      whiteList.value = [];
    }
  } else {
    const a = await RequestGetUserToWhitelist();
    console.log('获取成功', a);
    if (a.msg == '操作成功！') {
      whiteList.value = a.resultObj;
    } else {
      whiteList.value = [];
    }
  }
};
const delDisassembleWhite = async () => {
  const res = await RequestDeleteDisassemble();
  if (res.msg == '操作成功！') ElMessage.success('操作成功！');
  const result = await RequestDisassembleList();
  whiteList.value = [result.resultObj];
};
const addDisassembleWhite = async (node: number) => {
  const res = await RequestAddDisassemble(node);
  if (res.msg == '操作成功！') ElMessage.success('操作成功！');
};
const addWhiteListBtn = async () => {
  const a = await RequestAddUserToWhitelist(delIds.value);
  if (a.msg == '操作成功！') {
    ElMessage.success('操作成功！');
  }
};
const delWhiteList = async (item: any) => {
  const a = await RequestRemoveUserFromWhitelist(item.id);
  if (a.msg == '操作成功！') {
    whiteListBtn();
    ElMessage.success('用户已成功从白名单移除');
  }
};
// 推送消息数据
const sendMes = ref({
  method: '0', //0站内信，1短信，2推送
  templateId: '',
  type: '',
  content: '',
  title: '',
});
/**
 * 根据推送类型获取模板
 */
const template_options = ref<any>([]);
const typeChange = async () => {
  const a = await RequesttemplateIds(sendMes.value.type);
  template_options.value = a.resultObj;
};
const typeChange1 = async (value: number) => {
  template_options.value.forEach((item: any) => {
    if (item.id == value) {
      sendMes.value.content = item.content;
    }
  });
};
/**
 * 群发消息确认
 */
let loading = ref(false); //设置记录时间，用于防抖
let timer = ref(); //设置记录时间，用于防抖
const plateformSure = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      if (timer != null) {
        clearTimeout(timer.value);
      }
      timer.value = setTimeout(async () => {
        loading.value = true;
        // 判断是站内信还是短信
        if (sendMes.value.method == '0') {
          // 判断是那种用户群体
          if (nowShow.value == '1' || nowShow.value == '2') {
            sendToShopMes();
          } else if (nowShow.value == '3' || nowShow.value == '4') {
            sendToUserMes();
          }
        } else {
          /*************  1 普通用户，2 维修厂用户，3 拆解厂用户，4 普通商户，5 拖车用户  ************/
          if (nowShow.value == '1') {
            sendPhoneMes(3);
          } else if (nowShow.value == '2') {
            sendPhoneMes(2);
          } else if (nowShow.value == '3') {
            sendPhoneMes(1);
          } else if (nowShow.value == '4') {
            sendPhoneMes(0);
          } else {
            sendPhoneMes(4);
          }
        }
      }, 500);
    }
  });
};
/**
 * 给用户和修理厂发站内信
 */
const sendToUserMes = async () => {
  const a = await SendMesToUser({
    ids: delIds.value,
    method: sendMes.value.method,
    templateId: sendMes.value.templateId,
    content: sendMes.value.content,
    type: sendMes.value.type,
    title: sendMes.value.title,
  });
  if (a.msg == '操作成功！') {
    maskBtn1();
    ElMessage.success('发送成功');
    loading.value = false;
  } else {
    ElMessage.error('发送失败，请重试！');
    loading.value = false;
  }
};
/**
 * 给拆解厂和普通店铺发站内信
 */
const sendToShopMes = async () => {
  const a = await RequestPlatformToShopMes({
    ids: delIds.value,
    templateId: sendMes.value.templateId,
    content: sendMes.value.content,
    type: sendMes.value.type,
    title: sendMes.value.title,
  });
  loading.value = false;
  if (a.msg == '操作成功！') {
    maskBtn1();
    ElMessage.success('操作成功！');
  } else {
    ElMessage.error('操作失败');
  }
};
/**
 * 发送短信
 */
const sendPhoneMes = async (value: number) => {
  RequestSendSMS({
    ids: delIds.value,
    userType: value,
  });
};
/**
 * 推送类型
 */
const type_options = [
  {
    value: 0,
    label: '支付通知',
  },
  {
    value: 1,
    label: '物流通知',
  },
  {
    value: 2,
    label: '平台公告',
  },
  {
    value: 3,
    label: '优惠促销',
  },
];

/**************************************************  搜索  **************************************************/
// 搜索参数
const searchValue = ref({
  id: '',
  startTime: '',
  endTime: '',
  page: 1,
});
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startTime = '';
  searchValue.value.endTime = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  searchValue.value.endTime = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  if (radio.value === '1') {
    searchValue.value.startTime = moment(now).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startTime = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startTime = moment(now).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startTime = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};

const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
// 开始时间
const startTime = () => {
  searchValue.value.startTime.setHours(0);
  searchValue.value.startTime.setMinutes(0);
  searchValue.value.startTime.setSeconds(0);
  searchValue.value.startTime = moment(searchValue.value.startTime).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
// 结束时间
const endTime = () => {
  searchValue.value.endTime.setHours(23);
  searchValue.value.endTime.setMinutes(59);
  searchValue.value.endTime.setSeconds(59);
  searchValue.value.endTime = moment(searchValue.value.endTime).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
/**
 * 搜索
 */
const search = async () => {
  // 判断开始时间不能早于当前时间
  if (moment(searchValue.value.startTime).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startTime = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startTime !== '' && searchValue.value.endTime !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startTime).diff(moment(searchValue.value.endTime)) <= 0) {
        searchValue.value.page = 1;
        changListType();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endTime = '';
      }
    } else {
      searchValue.value.page = 1;
      changListType();
    }
  }
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  searchValue.value.page = val;
  tableData.value = tableAll.value.slice(15 * (searchValue.value.page - 1), 15 * searchValue.value.page);
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    id: '',
    startTime: '',
    endTime: '',
    page: 1,
  };
  radio.value = '0';
  changListType();
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
  messagesShow.value = false;
  whiteListShow.value = false;
  sendMes.value = {
    method: '',
    templateId: '',
    type: '',
    content: '',
    title: '',
  };
};
// 设置表格高度
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.tooltip-base-box {
  width: 600px;
}

.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tooltip-base-box .center {
  justify-content: center;
}

.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 180px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.nav1 {
  display: flex;
  height: 30px;
  align-items: center;
  margin-top: 20px;
  border-bottom: 0;

  .nav_li {
    width: 50%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
  }

  .current {
    border-bottom: 2px solid #5697f9;
  }
}

.table {
  overflow: hidden;
  padding: 0 10px;

  .table_function {
    margin-top: 20px;
    margin-bottom: 5px !important;
  }
}

:deep(.el-form-item) {
  align-items: center;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

// 推送消息
.plateform,
.messages {
  width: 600px;
  height: 500px;
  position: absolute;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -250px;
  z-index: 99;
  background: #fff;
}

:deep(.el-input__wrapper) {
  width: 150px;
}

:deep(.el-drawer.rtl) {
  background: #fff;
  width: 750px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

:deep(.is-process) {
  color: #409eff;
}

:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}

:deep(.is-finish .el-step__line) {
  background: #409eff;
}

.el-table .warning-row {
  background: #44a2ff !important;
}

:deep(.el-select) {
  width: 100%;
}
</style>
